<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
      * {
         margin: 0;
         padding: 0;
      }

      body{
        background-color: #f5f5f5;
      }

      .box {
        width: 289px;
        height: 415px;
        background-color:#fff;
        /* 让块级盒子水平居中对齐 */
        margin: 100px auto;
      }

      /* 图片宽度和父亲一样宽 */
      .box img{
        /* 当图片大于父盒子时,设置图片宽度为100%,与父盒子宽度一致 */
        /* 图片大小是592*440,大于了.box这个盒子,所以我们将img的宽度设置为100%,这样让其与盒子宽度一致 */
        width: 100%;
      }

      .review{
         height: 70px;
         font-size: 14px;
         /* 因为class="review"的这个p的段落子盒子没有给witdh属性,所以用padding也不会撑开盒子的宽度 */
         padding: 0 28px;
         /* 因为这个盒子指定了高度(height),所以使用padding指定top和bottom,会撑开盒子,所以这里使用margin合适 */
         margin-top: 30px;
      }

      .appraise{
         color: #b0b0b0;
         font-size: 12px;
         padding: 0 28px;
         margin-top: 20px;
      }

      .info{
        margin-top: 15px;
        font-size: 14px;
        padding: 0 28px;
      }

      .info h4{
         display: inline-block;
         /* 文字不加粗 */
         /* font-weight: 400;  */
         font-weight: normal;
      }

      .info span{
          color: #ff6700;
      }

      .info em{
          font-style: normal;
          color: #ebe4e0;
          margin: 0 6px 0 10px;
      }

      a{
        color: #333;
        text-decoration: none;
      }

    </style>
  </head>
  <body>
    <div class="box">
      <a href="#"><img src="images/img.jpg" alt="" /></a>
      <p class="review"><a href="#">快递牛,整体不错蓝牙可以说秒连.红米给力</a></p>
      <div class="appraise">来自于 117384232 的评价</div>
      <div class="info">
        <h4><a href="#">Redmi AirDots真无线蓝... </a></h4>
        <em>|</em>
        <span>99.9元</span>
      </div>
    </div>
  </body>
</html>
